* {
    margin: 0;
    padding: 0;
}
body{
	background-color: #f0f1f1;
}
ul li {
    list-style: none;
}


/* header */

header {
    height: 48px;
    background-color: #323232;
}

#header {
    width: 1103px;
    height: 48px;
    background-color: #323232;
    margin: 0 auto;
}

#header .img {
    width: 185px;
    height: 117px;
    float: left;
    /* position: absolute;
    z-index: 999; */
}

#header #ul1,
#con-right {
    margin-left: 42px;
}

#header #ul1 {
    width: 555px;
    height: 48px;
    float: left;
}

#header #ul1 li {
    width: 88px;
    height: 48px;
    float: left;
    margin-right: 3px;
    line-height: 48px;
    color: #a6a6a6;
    text-align: center;
    cursor: pointer;
}

#header #ul1 li:hover {
    background-color: tomato;
    color: white;
    transition: all 0.5s;
}

#header #con-right {
    width: 278px;
    height: 48px;
    float: right;
}

#header #con-right #ul2 {
    width: 275px;
    display: flex;
    justify-content: space-between;
}

#header #con-right #ul2 li {
    line-height: 48px;
    color: #a6a6a6;
}


/* banner */

#banner {
    width: 100%;
    height: 221px;
    background-image: url(../images/banner.png);
    background-size: 100% 100%;
    /* position: relative; */
    /* 给banner加定位，会把上面的logo遮挡住 */
}

#banner #ban-bom {
    width: 100%;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.5);
    /* position: absolute;
    bottom: 0; */
    /* 解决办法：加transfrom移动 */
    transform: translateY(192px);
}

#ban-bom-con {
    width: 1103px;
    height: 28px;
    margin: 0 auto;
}

#ban-bom-con span {
    color: #a6a6a6;
    margin-left: -180px;
    line-height: 28px;
}


/* nav中间导航栏 */

#nav {
    width: 1103px;
    height: 79px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 24px 0 28px 0;
}

#nav .navli {
    width: 79px;
    height: 26px;
    float: left;
    line-height: 26px;
    text-align: center;
}

#nav .navli:hover {
    cursor: pointer;
    transition: all 0.5s;
    background-color: powderblue;
}

#nav .navli:nth-of-type(1) {
    background-color: #636363;
}


/* list 列表图片*/

#listall {
	/* 1101 */
    width: 1128px;
	height: 536px;
    /* background-color: #f0f1f1; */
    margin: 0 auto;
    /* display: flex;
    justify-content: space-between; */
}
#list{
	display: none;
}
.list {
    width: 262px;
    height: 235px;
	float: left;
	/* display: flex; */
	/* flex-direction: column;
	justify-content: space-between; */
	margin-bottom: 35px;
	margin-right: 20px;
}

.list .listimg {
    width: 262px;
    height: 156px;
    /* background-color: rosybrown; */
    display: block;
}

.list h3 {
    width: 262px;
    height: 42px;
    color: #8d8d8d;
    line-height: 42px;
    box-sizing: border-box;
    padding-left: 15px;
    /* background-color: greenyellow; */
    border-bottom: 1px solid gray;
}

.list .listul {
    width: 262px;
    height: 39px;
    /* background-color: powderblue; */
	font-size: 13px;
	box-sizing: border-box;
	padding: 10px 15px;
}

/* 分页*/
.page{
	width: 245px;
	height: 36px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	margin-bottom: 30px;
}
.page li{
	width: 35px;
	height: 35px;
	background-color: white;
	margin-right: 5px;
	border-radius: 15%;
	text-align: center;
	line-height: 35px;
	cursor: crosshair;
}
.page li:nth-of-type(3){
	background-color: crimson;
}
.page li:hover{
	background-color: crimson;
}
/* 底部 */

footer {
    height: 83px;
    background-color: #323232;
}

#footer {
    width: 1101px;
    height: 83px;
    margin: 0 auto;
}

#footer img {
    width: 170px;
    height: 83px;
    float: left;
}

.footer-right {
    width: 635px;
    height: 83px;
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.footer-right ul {
    width: 386px;
    height: 14px;
    float: right;
}

.footer-right ul li {
    float: left;
    margin-right: 8px;
    font-size: 14px;
    color: #999999;
}

.footer-right p {
    width: 570px;
    height: 12px;
    font-size: 12px;
    float: right;
    color: #666666;
}
